<template>
  <div style="height: 100%" ref="dom"></div>
</template>

<script>
import * as echarts from 'echarts'
import { numAdd } from '@/utils/calulate'

export default {
  data() {
    return {
      myChart: null,
    }
  },
  components: {},
  props: {
    chartData: {
      type: Array,
      default: null,
    },
    lineList: {
      type: Array,
      default: null,
    },
    name: {
      type: String,
      default: '',
    },
    height: {
      type: Number,
      default: null,
    },
    chartScorll: {
      type: String,
      default: '',
    },
    scorllZoom: {
      type: Array,
      default: ()=>{return  [0,6]},
    },
  },
  mounted() {
    this.createChart()
  },
  computed: {},
  watch: {
    chartData: function (n) {
      this.createChart()
    },
  },
  methods: {
    getOption(a_data) {
      let x = [],
        legendData = [],
        series = []
      let option = {
        title: {
          text: this.name || '',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {},
        
        grid: {
          left: '0%',
          right: '0%',
          bottom: '0%',
          containLabel: true
        },
        toolbox: {
          feature: {
            // saveAsImage: {}
          },
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          axisLabel: {
            interval: 0,      // 坐标轴刻度标签的显示间隔
            rotate: this.chartScorll?15 :0       // 标签倾斜的角度
          },
          axisTick: {
            // show: false,
            alignWithLabel: true,
          },
          data: [],
          // axisLine: {
          //   lineStyle: {
          //     color: this.colors [0]
          //   }
          // },
        },
        
        yAxis: {
          type: 'value',
        },
        series: [],
      }
      if (this.lineList && this.lineList.length) {
        this.lineList.forEach((v) => {
          legendData.push(v.name)
          series.push({
            name: v.name,
            type: 'line',
            smooth: true,
            data: [],
            itemStyle: {
              color: v.color || '', //线的颜色以及头部显示的颜色
            },
          })
        })
      } else {
        series.push({
          name: this.name || '',
          type: 'line',
          smooth: true,
          data: [],
        })
      }
      this.chartData.forEach((v) => {
        x.push(v.name)
        if (this.lineList && this.lineList.length) {
          this.lineList.forEach((it, i) => {
            
            series[i].data.push(v[it.key])
          })
        } else {
          series[0].data.push(v.count)
        }
      })
      if( this.chartScorll ) {
        console.log(' this.chartScorll ')
        let dataZoom =  [
          {
              id: 'dataZoom',
              type: 'inside',
              // xAxisIndex: [0],
              startValue: this.scorllZoom[0],
              endValue: this.scorllZoom[1],
              filterMode: 'empty',
              moveOnMouseWheel:true,
              zoomLock:true,
          }
        ]
        dataZoom[0][`${this.chartScorll}AxisIndex`] = 0
        option.dataZoom = dataZoom
      }
      option.xAxis.data = x
      legendData.length ? (option.legend.data = legendData) : ''
      option.series = series
      return option
    },
    createChart() {
      let option = this.getOption(this.chartData)
      if (!this.myChart) this.myChart = echarts.init(this.$refs.dom)
      window.onresize = this.myChart.resize
      this.myChart.setOption(option)
    },
  },
  computed: {
   
  },
  destroyed() {},
}
</script>
<style lang='scss' scoped>
</style>